<template>
  <div class="content">
    <div class="screen">
      <picker
        :range="openShopList"
        range-key="label"
        :value="pickerValue"
        @change="bindPickerChange"
      >
        <img
          class="banner"
          src="https://akk.028wkf.cn/kdb-weapp-img/data-img/filtrate-icon.png"
          mode="scaleToFill"
        />
      </picker>
    </div>
    <div class="seekBox">
      <i-icon class="searchIcon" type="search" size="18" color="#999" />
      <input
        confirm-type="search"
        @confirm="seekClick"
        type="text"
        placeholder="输入手机号"
        v-model="findInputValue"
        class="findInput"
      />
    </div>
    <div class="hint">
      <i-icon class="icon" type="group" size="16" color="#9e9e9e" />
      <!-- <span>共有{{total}}为会员</span> -->
      <span>共有{{promoteForm.memberCount}}为会员</span>
      <p>已开店数（{{promoteForm.oneShareShopCount}}）位</p>
    </div>
    <scroll-view class="scroll-wrap" scroll-y @scrolltolower="handleLoadMore">
      <div class="list" v-for="(item,index) in dataList" :key="index">
        <div class="left">
          <img
            :src="item.avatar"
            mode="scaleToFill"
            @click="vipInfoLinkClick(item)"
          />
          <div class="info">
            <div class="info-top">
              <span>{{item.realName}}</span>
              <p v-if="item.openShop">店</p>
            </div>
            <div class="info-bottom">
              <span>{{item.mobile2}}</span>
              <p>{{item.createDate}}</p>
            </div>
          </div>
        </div>
        <button class="btn" @click="callClick(item)">联系Ta</button>
      </div>
      <p v-if="alreadyLastPage" class="end-tip">没有更多了</p>
    </scroll-view>
  </div>
</template>

<script>
import {
  FIND_CUSTOMER_PAGE_API,
  NEW_CUSTOMER_TOTAL,
  NEW_SHARE_DATA_COUNT
} from '@/api'

export default {
  components: {},

  data () {
    return {
      findInputValue: '',
      currentPage: 1,
      alreadyLastPage: false,
      list: [],
      total: 0,
      oneShareShopCount: 0,
      openShopList: [
        {
          label: '全部',
          key: ''
        },
        {
          label: '已开店',
          key: 'Y'
        },
        {
          label: '未开店',
          key: 'N'
        }
      ],
      pickerValue: null,
      openShopId: '',
      promoteForm: {}
    }
  },
  created () {},
  computed: {
    account () {
      return this.$store.state.account
      // return this.$cookie.get('account')
    },
    dataList () {
      return this.list.map(_ => ({
        ..._,
        mobile2: _.mobile
          ? `${_.mobile.match(/^\d{3}/)[0]}****${_.mobile.match(/\d{4}$/)[0]}`
          : '-',
        realName: `${this.nameReg(_.realName)}`,
        createDate: _.createDate ? `${_.createDate.split(' ')[0]}` : '-'
      }))
    }
  },
  onShow () {
    this.init()
    this.getVipInfoData()
    this.getNewCustomerTotal()
    this.getNewShareDateCount()
  },
  methods: {
    nameReg (val) {
      if (val && val.length) {
        let len = val.length - 1
        let xin = ''
        for (let i = 0; i < len; i++) {
          xin += '*'
        }
        return val.substr(0, 1) + xin
      } else {
        return '-'
      }
    },
    handleLoadMore () {
      if (!this.alreadyLastPage) {
        this.getVipInfoData()
      }
    },
    vipInfoLinkClick (item) {
      this.$router.push(
        `/pages/shop-management/vip-admin-info/main?customerId=${
          item.customerId
        }`
      )
    },
    callClick (item) {
      const vm = this
      if (item.mobile && item.mobile.length > 10) {
        vm
          .$dialog(
            item.mobile2,
            item.realName,
            '#000',
            '#6370fd',
            '拨打',
            '取消'
          )
          .then(() => {})
          .catch(() => {
            wx.makePhoneCall({
              phoneNumber: item.mobile
            })
          })
      } else {
        vm.$toast('该会员暂无手机号码，不能进行联系')
      }
    },
    bindPickerChange (e) {
      const vm = this
      let index = Number(e.mp.detail.value)
      vm.openShopId = vm.openShopList[index].key
      vm.currentPage = 1
      vm.alreadyLastPage = false
      vm.list = []
      vm.total = 0
      vm.getVipInfoData()
      vm.getNewShareDateCount()
    },
    seekClick () {
      const vm = this
      vm.currentPage = 1
      vm.alreadyLastPage = false
      vm.list = []
      vm.total = 0
      vm.getVipInfoData()
      vm.getNewShareDateCount()
    },
    init () {
      const vm = this
      vm.findInputValue = ''
      vm.currentPage = 1
      vm.alreadyLastPage = false
      vm.list = []
      vm.total = 0
      vm.oneShareShopCount = 0
      vm.pickerValue = null
      vm.openShopId = ''
    },
    /** api **/
    getNewShareDateCount () {
      const vm = this
      NEW_SHARE_DATA_COUNT(vm.account.shopId)
        .then(r => {
          if (r.data.code === '0') {
            vm.promoteForm = r.data.data
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    getNewCustomerTotal () {
      const vm = this
      let params = {
        shopId: vm.account.shopId
      }
      NEW_CUSTOMER_TOTAL(params)
        .then(r => {
          if (r.data.code === '0') {
            console.log(r.data.data)
            vm.oneShareShopCount = r.data.data.oneShareShopCount
              ? r.data.data.oneShareShopCount
              : 0
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    getVipInfoData () {
      const vm = this
      let params = {
        shopId: vm.account.shopId
      }
      if (vm.findInputValue) {
        params.phone = vm.findInputValue
      } else {
        delete params.phone
      }
      if (vm.openShopId) {
        params.openShopId = vm.openShopId
      } else {
        delete params.openShopId
      }

      FIND_CUSTOMER_PAGE_API(params, vm.currentPage, 10)
        .then(r => {
          if (r.data.code === '0') {
            let { list, isFirstPage, isLastPage, total } = r.data.data
            vm.total = total
            console.log('张睿智', vm.total)
            vm.printList(list, isFirstPage, isLastPage)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    },
    printList (list, isFirst, isLast) {
      const vm = this
      if (isFirst) {
        vm.list = list
        if (isLast || !list.length) {
          vm.alreadyLastPage = true
        } else {
          vm.alreadyLastPage = false
          vm.currentPage += 1
        }
      } else if (isLast) {
        vm.alreadyLastPage = true
        vm.list.push(...list)
      } else {
        vm.list.push(...list)
        vm.alreadyLastPage = false
        vm.currentPage += 1
      }
    }
  }
}
</script>

<style lang="scss">
@import 'static/styles/color.scss';
.content {
  width: 95%;
  margin: auto;
  > .screen {
    height: 40px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    img {
      width: 23px;
      height: 23px;
    }
  }
  > .seekBox {
    width: 100%;
    height: 50px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-size: 14px;
    > .searchIcon {
      position: absolute;
      top: 50%;
      right: calc(100% - 300px + 100% - 300px / 2 + 70px);
      transform: translate(0, -50%);
    }
    > .findInput {
      width: 100%;
      border-radius: 10px;
      height: 30px;
      background: #f4f4f4;
      padding-left: 30px;
    }
  }
  > .hint {
    width: 90%;
    height: 40px;
    margin: auto;
    font-size: 12px;
    display: flex;
    align-items: center;
    color: #9e9e9e;
    border-bottom: 1px solid #9e9e9e;
    > span {
      margin: 0 14px 0 5px;
    }
  }
  > .scroll-wrap {
    height: calc(100% - 40px - 50px - 40px);
    .list {
      width: 100%;
      height: 80px;
      margin: 8px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        display: flex;
        align-items: center;
        img {
          width: 60px;
          height: 60px;
          border-radius: 50px;
        }
        .info {
          display: flex;
          flex-direction: column;
          color: #000;
          margin-left: 10px;
          .info-top {
            width: 100px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            span {
              font-size: 15px;
            }
            p {
              width: 20px;
              height: 20px;
              font-size: 13px;
              line-height: 20px;
              text-align: center;
              color: #fff;
              border-radius: 50px;
              background: linear-gradient($new-light-blue, $new-dark-blue);
            }
          }
          .info-bottom {
            display: flex;
            align-items: center;
            span {
              font-size: 14px;
            }
            p {
              font-size: 12px;
              margin-left: 10px;
            }
          }
        }
      }
      .btn {
        width: 65px;
        height: 30px;
        line-height: 30px;
        margin: 0 !important;
        padding: 0;
        font-size: 13px;
        border-radius: 25px;
        margin: auto;
        color: #fff;
        background: linear-gradient(to right, $new-dark-blue, $new-light-blue);
      }
    }
    .end-tip {
      margin: 0;
      padding: 15px;
      text-align: center;
      color: $gray;
      font-size: 15px;
    }
  }
}
</style>
